import React from 'react';
import Footer from '../../components/Footer';
import './bookshelf.css';

// 数据开始——————————————————————————————————————————————
const bookList = [
  {
    id: 'book_001', // 唯一标识符 
    cover: 'https://img.js.design/assets/img/66cc358726a220909dda2515.png#03943aa634c49b6a4de5dd39cec49981', 
    title: '平凡的世界',
    author: '九万哥',
  },
  {
    id: 'book_002',
    cover: 'https://img.js.design/assets/img/66cc36701efe7fb16f141249.png#3e52e96ceafaaeb553d8659733ec025f', 
    title: '百年孤独',
    author: '九万哥二号',
  },
  {
    id: 'book_003',
    cover: 'https://img.js.design/assets/img/66cc390d8afcb6064dc928c6.png#d2adee1af967a2f8fc790a74cfb7b55f', 
    title: '百年孤独',
    author: '九万哥3号',
  },
  {
    id: 'book_004',
    cover: 'https://img.js.design/assets/img/66cc3982745a6dd07a000f3f.png#fbb2f76638da5e7ebefea29011763104', 
    title: '百年孤独',
    author: '九万哥4号',
  },
  {
    id: 'book_006',
    cover: 'https://img.js.design/assets/img/66cc39a18afcb6064dc94f78.png#3057f9bb9408d6be78b149a512e128ac', 
    title: '百年孤独',
    author: '九万哥6号',
  },
  {
    id: 'book_007',
    cover: 'https://img.js.design/assets/img/66cc39f226a220909ddba303.png#ed0100052b62e3d819f487ad57dcc6cf', 
    title: '黑白不分',
    author: '九万哥7号',
  },
  {
    id: 'book_008',
    cover: 'https://img.js.design/assets/img/66cc3a10c3154e410468ef67.png#786c07f263239d842699651676111f03', 
    title: '查知远色',
    author: '九万哥8号',
  },
  {
    id: 'book_009',
    cover: 'https://img.js.design/assets/img/66cc3a2c745a6dd07a004a27.png#4271cf52dcd1794686421571c4ccb03c', 
    title: '青丘雪',
    author: '九万哥9号',
  },
  {
    id: 'book_010',
    cover: 'https://img.js.design/assets/img/66cc3a3b26a220909ddbb925.png#4dcf3959d5ef033a0159d344e0a14767', 
    title: '倾盆大雨遇见你',
    author: '九万哥10号',
  },
  // ...可继续追加数据项 
];
// 数据结束——————————————————————————————————————————————

const ContactPage = () => {
  return (
    <div>
    
      
      <div>
        {/* 书架标题开始 */}
        <div className='titletop'>书架</div>
        {/* 书架标题结束 */}

        {/* 最近阅读开始 */}
        <div className='lastboos'>
          <div className='lastbooks-item'>

            <img src="https://img.js.design/assets/img/66cc235e351574788ad2348c.png#94bfc7510cb6ef19aa2776bfe614162d" alt="" />
            
            <div className='lastbooks-item-content'>
              <h3>平凡的伟大</h3>
              <p className="lastbooks-item-content-description">在这个世界上，每个人都应该用...</p>
              <div className="lastbooks-item-content-time">阅读时长：48小时</div>
              <button>继续阅读</button>
          

              </div>

          </div>
        </div>
        {/* 最近阅读结束 */}

      {/* 书架收藏书籍开始 */}
        <div className="lovebooks">

          <div className="lovebooks-content">

          {bookList.map((book)  => (
               <div 
               className="lovebooks-content-item" 
               key={book.id}  // 必须唯一，建议使用UUID或数据库ID 
             >
               <img src={book.cover} alt={book.title} />
               <div className="lovebooks-content-item-title">
               {book.title} 
               </div>
               <div className="lovebooks-content-item-author">
               {book.author} 
               </div>
             </div>
          ))}

          </div>

        </div>
        {/* 书架收藏书籍结束 */}

      </div>


      <Footer />
    </div>
  );
};

export default ContactPage;